<script lang="ts" setup>
import { $t } from '@/plugins/i18n';
import { ref } from 'vue';
import LoadingSvg from '@/assets/svg/loading.svg';
import { FormProps } from '@/views/configuration/menu-icon/utils';
import { useMenuIconStore } from '@/store/configuration/menuIcon';

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    iconCode: '',
    iconName: '',
  }),
});

const loading = ref(false);
const form = ref(props.formInline);
const menuIconStore = useMenuIconStore();

/** 搜索 */
const onRequestIconName = async (iconName: string) => {
  const data = { currentPage: 1, pageSize: 20, iconName };
  loading.value = true;

  if (iconName) {
    await menuIconStore.getIconNameListByIconName(data);
  } else menuIconStore.iconNameList = [];

  loading.value = false;
};
</script>

<template>
  <el-select
    v-model="form.iconName"
    :loading="loading"
    :placeholder="$t('input') + $t('menuIcon_iconName')"
    :remote-method="onRequestIconName"
    allow-create
    clearable
    filterable
    remote
    remote-show-suffix
  >
    <el-option v-for="menuIcon in menuIconStore.iconNameList" :key="menuIcon.id" :label="menuIcon.iconName" :value="menuIcon.iconName" />
    <template #loading>
      <el-icon class="is-loading">
        <LoadingSvg />
      </el-icon>
    </template>
  </el-select>
</template>

<style>
.el-select-dropdown__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  font-size: 20px;
}

.circular {
  display: inline;
  width: 30px;
  height: 30px;
  animation: loading-rotate 2s linear infinite;
}

.path {
  stroke: var(--el-color-primary);
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  stroke-width: 2;
  animation: loading-dash 1.5s ease-in-out infinite;
}

.loading-path .dot1 {
  opacity: 0.3;
  fill: var(--el-color-primary);
  transform: translate(3.75px, 3.75px);
  animation: custom-spin-move 1s infinite linear alternate;
}

.loading-path .dot2 {
  opacity: 0.3;
  fill: var(--el-color-primary);
  transform: translate(calc(100% - 3.75px), 3.75px);
  animation: custom-spin-move 1s infinite linear alternate;
  animation-delay: 0.4s;
}

.loading-path .dot3 {
  opacity: 0.3;
  fill: var(--el-color-primary);
  transform: translate(3.75px, calc(100% - 3.75px));
  animation: custom-spin-move 1s infinite linear alternate;
  animation-delay: 1.2s;
}

.loading-path .dot4 {
  opacity: 0.3;
  fill: var(--el-color-primary);
  transform: translate(calc(100% - 3.75px), calc(100% - 3.75px));
  animation: custom-spin-move 1s infinite linear alternate;
  animation-delay: 0.8s;
}

@keyframes loading-rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes loading-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -40px;
  }

  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -120px;
  }
}

@keyframes custom-spin-move {
  to {
    opacity: 1;
  }
}
</style>
